<template>
	<el-drawer title="人像来源" :visible.sync="visible" size="480px" append-to-body class="face_detail_drawer">
		<div class="face_info_wrapper">
			<div class="face">
				<img :src="data.url" alt="" />
				<p>{{ data.name }}</p>
			</div>
			<div class="resource" v-loading="loading">
				<h2>资源列表</h2>
				<template v-if="resourceList.length > 0">
					<dl v-for="(item, index) in resourceList" :key="index">
						<dt>
							<img :src="item | fileTypeIcon" :alt="item.oldName" />
						</dt>
						<dd @click="handleRouterTo(item.id)">{{ item.oldName }}</dd>
					</dl>
				</template>
				<template v-else>
					<el-empty description="暂无资源"></el-empty>
				</template>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import { queryFileDetail } from '@/api/data/tbNetDisk';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default () {
				return {};
			}
		}
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			resourceList: []
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			let promiseArr = [];
			this.$emit('input', flag);
			if(!flag) return false;
			this.loading = true;
			this.data.idList.forEach((id) => {
				promiseArr.push(this.requestResourceData(id));
			});
			Promise.all(promiseArr).then((res) => {
				this.loading = false;
				this.resourceList = res.filter((item) => Object.keys(item).length > 0);
			});
		}
	},
	methods: {
		//资源列表
		async requestResourceData(id) {
			let result = await queryFileDetail(id).then((res) => res.data);
			if(result.code === '0') {
				return !result.data ? {} : !result.data[0] ? {} : result.data[0];
			}
		},

		//跳转到资源详情页面
		handleRouterTo(id) {
			let router = this.$router.resolve({ path: '/data/resource/' + id });
			window.open(router.href, '_blank');
		}
	}
};
</script>

<style lang="scss">
.face_detail_drawer {
	.el-drawer {
		top: 56px;
	}

	.el-drawer__header {
		padding: 10px;
		margin: 0;
		border-bottom: solid 1px #eef1f5;

		span {
			font-size: 16px;
			font-weight: bold;
			margin-left: 5px;
		}
	}
}
</style>

<style lang="scss" scoped>
.face_info_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;

	.face {
		display: flex;
		align-items: center;
		padding: 15px;

		img {
			width: 100px;
			height: 100px;
			border: solid 1px #f1f1f1;
			object-fit: cover;
			flex-shrink: 0;
		}

		p {
			flex: 1;
			margin-left: 12px;
		}
	}

	.resource {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		h2 {
			font-size: 16px;
			font-weight: bold;
			padding: 0 15px 15px;
			border-bottom: solid 1px #ebeef5;
			color: #72767b;
		}

		dl {
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: solid 1px #ebeef5;
		}

		dt {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
			margin-right: 6px;

			img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		dd {
			flex: 1;
			height: 24px;
			line-height: 24px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			cursor: pointer;

			&:hover {
				color: #0c61b5;
				text-decoration: underline;
			}
		}
	}
}
</style>